<template>
  <div class="addProduct-container">
    <el-button type="primary" @click="handleReturn">{{ $t('product.returnProductList') }}</el-button>
    <!-- 商品分类 -->
    <el-form ref="productAddForm" :model="addProductParams" class="productAddPage" label-width="150px" label-position="right" :rules="productParamsValite">
      <el-row class="bg"><h3>1、{{ $t('product.chooseProductSort') }}</h3></el-row>
      <!-- 商品类别 -->
      <el-form-item :label="$t('product.productSort')" prop="sortValue">
        <el-select v-model="addProductParams.sortValue" :placeholder="$t('product.pleaseChooseSort')" @change="handleChooseSort">
          <el-option
            v-for="item in sortList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 属性 -->
      <el-form-item
        v-for="(item,key) in productBaseInfo"
        :key="key"
        :label="item.name"
        :prop="item.choose"
        :rules="[
          { required: true, trigger: 'change' }
        ]"
      >
        <el-checkbox-group v-model="checkDir" @change="handleCheckedAttribute">
          <el-checkbox v-for="child in item.values" :key="child.id" :label="child.id">
            {{ child.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row class="bg"><h3>2、{{ $t('product.chooseSupplier') }}</h3></el-row>
      <!-- issuer供应商 -->
      <el-form-item :label="$t('product.supplier')" prop="issuer">
        <el-select v-model="supplierValue" :placeholder="$t('product.pleaseChooseSupplier')" @change="handleChooseIssuer">
          <el-option
            v-for="item in supplierList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 商品模板 -->
      <el-form-item :label="$t('product.productTemplate')" prop="template">
        <el-select v-model="templateValue" :placeholder="$t('product.pleaseChooseProductTemp')" @change="handleChooseTemp">
          <el-option
            v-for="item in templateListData"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <span class="tips">{{ $t('product.productTempTips') }}</span>
      </el-form-item>
      <el-row class="bg"><h3>3、{{ $t('product.editorProductBaseInfo') }}</h3></el-row>
      <!-- 商品名称 -->
      <el-form-item :label="$t('product.productName')" prop="productName">
        <el-input v-model="addProductParams.productName" :placeholder="$t('product.proposalLenght')" />
      </el-form-item>
      <!-- 分享描述 -->
      <el-form-item :label="$t('product.shareDesc')">
        <el-input v-model="addProductParams.productShareDesc" style="display:inline-block" />
        <span class="tips">{{ $t('product.shareWechart') }}</span>
      </el-form-item>
      <!-- 商品卖点 -->
      <el-form-item :label="$t('product.productSelling')">
        <el-input v-model="addProductParams.productSell" />
        <span class="tips">{{ $t('product.sellingInfo') }}</span>
      </el-form-item>
      <!-- 商品分组 -->
      <el-form-item :label="$t('product.productGroup')">
        <el-select v-model="groupValue" style="width: 80%" multiple clearable :placeholder="$t('product.pleaseChooseProductGroup')" @change="handleSelect">
          <el-option
            v-for="item in groupList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 封面图 -->
      <el-form-item :label="$t('product.coverPic')" prop="coverImg">
        <el-upload
          ref="uploadDom"
          action="#"
          list-type="picture-card"
          :auto-upload="true"
          :file-list="coverPhotoList"
          :http-request="handleUploadHttp"
          :limit="5"
          :on-exceed="handleOverLimit"
        >
          <i slot="default" :loading="coverUploading" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <!-- 商品图 -->
      <el-form-item :label="$t('product.productPic')" prop="contentImg">
        <el-upload
          ref="uploadProductPicDom"
          action="#"
          :file-list="contentPhotoList"
          list-type="picture-card"
          :auto-upload="true"
          :http-request="handleProductUploadHttp"
          :limit="5"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleProductPicRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <!-- 商品描述 -->
      <el-form-item :label="$t('product.productDesc')">
        <el-upload
          class="upload-demo"
          action="#"
          :before-upload="handleEditorImg"
          style="position:absolute;right:3%;top:10px"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- <tiny-mce :id="'productDesc'" :value="content" @input="handleEditorContent" /> -->
        <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @input="handleEditorContent" />
      </el-form-item>
      <el-row class="bg"><h3>4、{{ $t('product.productPrice') }}</h3></el-row>
      <!-- 商品价格 -->
      <el-form-item :label="$t('product.productPrice')" prop="productPrice">
        <el-input v-model="addProductParams.productPrice" /> <span class="company">{{ $t('product.element') }}</span>
      </el-form-item>
      <!-- 划线价格 -->
      <el-form-item :label="$t('product.linePrice')">
        <el-input v-model="addProductParams.linePrice" /> <span class="company">{{ $t('product.element') }}</span>
        <span class="tips">{{ $t('product.exampleTip') }}：<span style="text-decoration: line-through">￥200</span></span>
      </el-form-item>
      <!-- 折扣价 -->
      <el-form-item>
        <el-checkbox v-model="discountTrue" @change="chooseDiscount">{{ $t('product.ifJoinDiscount') }}<span style="font-size: 12px;margin-left:10px">{{ $t('product.discountTip') }}</span></el-checkbox>
      </el-form-item>
      <el-form-item
        v-if="discountTrue"
        prop="discountPrice"
        :label="$t('product.discountPrice')"
        :rules="[
          { required: true, message:$t('product.discountErrorTip'), trigger: 'blur' }
        ]"
      >
        <el-input v-model="addProductParams.discountPrice" /> <span class="company">{{ $t('product.element') }}</span>
      </el-form-item>
      <!-- 邮寄模板 -->
      <el-form-item :label="$t('product.sendTemplate')">
        <el-input v-model="addProductParams.sendTemplate" :placeholder="$t('product.unifiedFreight')" /> <span class="company">{{ $t('product.element') }}</span>
      </el-form-item>
      <el-form-item>
        <el-button :loading="saveLoading" type="primary" plain @click="handleConfirmDraft">{{ $t('product.saveStrftDraft') }}</el-button>
        <el-button v-if="productStatus!=='SALED'" :loading="upLoading" type="primary" style="margin-left:30px" @click="handleConfirmUpShelves">{{ $t('product.productUp') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import JsonEditor from '@/components/JsonEditor/index'
// import TinyMce from '@/components/Tinymce/index'
import { catalogAttribute,
  catalogList,
  issuerList,
  templateList,
  getStorageToken,
  groupList,
  productAdd,
  getObjectAddress,
  changeProductStatus,
  productEditor
} from '@/api/product'
// import { file } from 'node_modules/_jszip@3.2.1@jszip/lib/object'
export default {
  name: 'AddProduct',
  components: {
    // JsonEditor
    // TinyMce
  },
  props: {
    datas: {
      type: Object,
      default: function() {
        return {}
      }
    },
    types: {
      type: String,
      default: ''
    },
    productStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      directionList: ['横板', '竖版'],
      checkDir: [],
      colorList: ['白色', '黄色'],
      checkColor: [],
      discountTrue: false,
      taxrateTrue: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      addProductParams: {
        productName: '',
        productShareDesc: '',
        productSell: '',
        productPrice: '',
        discountPrice: '',
        taxRate: '', // 税号暂时没有
        sendTemplate: '',
        linePrice: '',
        sortValue: ''

      },
      supplierList: [
        {
          label: 'e',
          value: '123'
        },
        {
          label: 'r',
          value: '333'
        }
      ],
      supplierValue: '',
      templateListData: [
        {
          label: 'e',
          value: '123'
        },
        {
          label: 'r',
          value: '333'
        }
      ],
      templateValue: '',
      groupList: [],
      groupValue: [],
      sortList: [],
      sortValue: '',
      jsonValue: {},
      productBaseInfo: [],
      catalogId: '',
      issuerId: '',
      templateId: '',
      groupIdList: [],
      content: '',
      contentImage: [],
      coverImage: [],
      productDetail: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
            [{ direction: 'rtl' }], // text direction\
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }]

          ]
        }
      },
      coverUploading: true,
      contentPhotoList: [],
      coverPhotoList: [],
      productId: '',
      queryParamsStatus: '',
      saveLoading: false,
      upLoading: false,
      productParamsValite: {
        sortValue: [
          { required: true, message: this.$t('product.sortErrorTip'), triiger: 'change' }
        ],
        productName: [
          { required: true, message: this.$t('product.nameErrorTip'), triiger: 'blur' }
        ],
        productPrice: [
          { required: true, message: this.$t('product.priceErrorTip'), triiger: 'blur' }
        ],
        issuer: [
          { required: true, message: this.$t('product.issuerErrorTip'), triiger: 'blur' }
        ],
        template: [
          { required: true, message: this.$t('product.templateErrorTip'), triiger: 'blur' }
        ],
        coverImg: [
          { required: true, message: this.$t('product.coverErrorTip'), triiger: 'blur' }
        ],
        contentImg: [
          { required: true, message: this.$t('product.contentErrorTip'), triiger: 'blur' }
        ]
      },
      attributesValue: ''
    }
  },
  watch: {
    catalogId(item) {
      if (this.catalogId !== '' && this.issuerId !== '') {
        this.getTemplateList()
      }
    },
    issuerId(item) {
      if (this.catalogId !== '' && this.issuerId !== '') {
        this.getTemplateList()
      }
    }
  },
  mounted() {
    this.getCatalogList()
    this.getIssuerList()
    this.getGroupList()
    // 编辑数据回显
    if (this.types === 'editor') {
      this.$refs.productAddForm.resetFields()
      this.getEditorData()
    } else {
      this.clearData()
    }
  },
  methods: {
    // 编辑回显数据
    getEditorData() {
      var self = this
      var getParams = this.datas
      this.productId = getParams.id
      this.productBaseInfo = getParams.attributes
      getParams.productAttributes.forEach(item => {
        self.checkDir.push(item.valueId)
      })
      this.addProductParams.sortValue = getParams.catalogInfo.id
      this.addProductParams.productName = getParams.title
      this.addProductParams.productShareDesc = getParams.shareDesc
      this.addProductParams.productSell = getParams.summary
      this.addProductParams.productPrice = getParams.price
      this.addProductParams.discountPrice = getParams.promotionPrice
      this.addProductParams.sendTemplate = getParams.postage
      this.addProductParams.linePrice = getParams.underlinePrice
      this.content = getParams.detail
      this.discountTrue = getParams.promotionPriceEnable
      this.groupValue = getParams.groupIds
      this.supplierValue = getParams.issuerInfo.id
      const fileList = []
      if (getParams.contentImage && getParams.contentImage.length > 0) {
        getParams.contentImage.forEach(item => {
          fileList.push({ url: item })
        })
      }
      this.contentPhotoList = fileList
      const coverList = []
      if (getParams.coverImage && getParams.coverImage.length > 0) {
        getParams.coverImage.forEach(item => {
          coverList.push({ url: item })
        })
      }
      this.coverPhotoList = coverList
      //  参数赋值
      this.groupIds = getParams.groupIds
      this.contentImage = this.contentPhotoList
      this.catalogId = getParams.catalogInfo.id
      this.coverImage = this.coverPhotoList
      this.issuerId = getParams.issuerInfo.id
      this.groupIdList = getParams.groupIds
      this.templateId = getParams.templateInfo.id
    },
    // 添加清空数据
    clearData() {},
    // 获取分类列表 ,
    getCatalogList() {
      var self = this
      var param = {
        code: '',
        enable: '',
        pageNo: 0,
        pageSize: 200,
        title: '',
        type: ''
      }
      catalogList(param).then(res => {
        var data = []
        res.data.contents.forEach(item => {
          var obj = {
            label: item.title,
            value: item.id
          }
          data.push(obj)
        })
        self.sortList = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 选择分类
    handleChooseSort(id) {
      var self = this
      self.catalogId = id
      catalogAttribute(id).then(res => {
        self.productBaseInfo = res.data.attributes
        self.checkDir = []
      }).catch(error => {
        console.log(error)
      })
    },
    // 选择属性
    handleCheckedAttribute(item) {
      console.log(item)
      var resultJson = {}
      this.productBaseInfo.forEach(element => {
        element.chooseChildArray = []
        element.choose = ''
        if (item.length > 0) {
          item.forEach(child => {
            if (child.attributeId === element.id) {

              if (element.chooseChildArray.indexOf(child.name) === -1) {
                element.chooseChildArray.push(child)
              }
            }
          })
        }
        resultJson[element.name] = element.chooseChildArray
        if (element.chooseChildArray.length > 0) {
          element.choose = 'true'
        }
      })
      console.log(this.productBaseInfo)
      this.jsonValue = resultJson
    },
    // 供应商 列表
    getIssuerList() {
      var self = this
      issuerList().then(res => {
        self.supplierList = res.data
      })
    },
    // 选择供应商
    handleChooseIssuer(id) {
      this.issuerId = id
    },
    // 商品模板列表
    getTemplateList() {
      var self = this
      var obj = {
        catalogId: this.catalogId,
        issuerId: this.issuerId,
        pageNo: 0,
        pageSize: 200
      }
      templateList(obj).then(res => {
        self.templateListData = res.data
      })
    },
    // 选择模板
    handleChooseTemp(id) {
      this.templateId = id
    },
    // 封面图图片上传oss
    handleUploadHttp(file) {
      var self = this
      const fileList = this.$refs.uploadDom.uploadFiles
      this.coverUploading = true
      getStorageToken({ identifier: '' }).then(res => {
        var data = res.data.token
        const OSS = require('ali-oss')
        var client = new OSS({
          region: 'oss-cn-hangzhou',
          accessKeyId: data.accessKeyId,
          accessKeySecret: data.accessKeySecret,
          bucket: data.bucketName,
          stsToken: data.securityToken
        })
        client.put(data.objectName, file.file).then(results => {
          getObjectAddress({ objectName: results.name }).then(item => {
            var obj = {
              uid: file.file.uid,
              url: item.data.imagePath
            }
            self.coverImage.push(obj)
          }).catch(error => {
            console.log(error)
          })
          self.coverUploading = false
        }).catch(err => {
          fileList.splice(file, 1)
          console.log(err)
          self.coverUploading = false
        })
      }).catch(error => {
        fileList.splice(file, 1)
        console.log(error)
        self.coverUploading = false
      })
    },
    // 商品图上传
    handleProductUploadHttp(file) {
      var self = this
      console.log('==========', file)
      getStorageToken({ identifier: '' }).then(res => {
        var data = res.data.token
        const OSS = require('ali-oss')
        var client = new OSS({
          region: 'oss-cn-hangzhou',
          accessKeyId: data.accessKeyId,
          accessKeySecret: data.accessKeySecret,
          bucket: data.bucketName,
          stsToken: data.securityToken
        })
        client.put(data.objectName, file.file).then(results => {
          getObjectAddress({ objectName: results.name }).then(item => {
            var obj = {
              uid: file.file.uid,
              url: item.data.imagePath
            }
            self.contentImage.push(obj)
          }).catch(error => {
            console.log(error)
          })
        }).catch(err => {
          console.log(err)
        })
      }).catch(error => {
        console.log(error)
      })
    },
    // 选择折扣
    chooseDiscount(value) {
      this.discountTrue = value
      if (this.addProductParams.discountPrice === '') {
        console.log(3)
      }
    },
    // 选择税率
    chooseTaxrate(value) {
      this.taxrateTrue = value
    },
    // 封面图删除
    handleRemove(file) {
      file.url = ''
      const fileList = this.$refs.uploadDom.uploadFiles
      const index = fileList.findIndex(fileItem => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1)
      this.coverImage.forEach(item => {
        if (item.uid === file.uid) {
          this.coverImage.splice(item, 1)
        }
      })
    },
    // 商品图 删除
    handleProductPicRemove(file) {
      file.url = ''
      console.log(file)
      const fileList = this.$refs.uploadProductPicDom.uploadFiles
      const index = fileList.findIndex(fileItem => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1)
      this.contentImage.forEach(item => {
        if (item.uid === file.uid) {
          this.coverImage.splice(item, 1)
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      getStorageToken().then(res => {
        console.log(res)
      })
    },
    // 文本编辑
    handleEditorContent(val) {
      this.productDetail = val
      var quill = this.$refs.myQuillEditor.quill
      const length = val.length
      quill.setSelection(length)
    },
    // 富文本上传
    handleEditorImg(file) {
      var self = this
      // const length = quill.getSelection().index
      // quill.insertEmbed(length, 'image', item.data.imagePath)
      // quill.setSelection(length + 1)
      // return
      getStorageToken({ identifier: '' }).then(res => {
        console.log(res)
        var data = res.data.token
        const OSS = require('ali-oss')
        var client = new OSS({
          region: 'oss-cn-hangzhou',
          accessKeyId: data.accessKeyId,
          accessKeySecret: data.accessKeySecret,
          bucket: data.bucketName,
          stsToken: data.securityToken
        })
        client.put(data.objectName, file).then(results => {
          getObjectAddress({ objectName: results.name }).then(item => {
            var quill = self.$refs.myQuillEditor.quill
            if (quill.getSelection()) {
              const length = quill.getSelection().index
              quill.insertEmbed(length, 'image', item.data.imagePath)
              quill.setSelection(length + 1)
            } else {
              quill.insertEmbed(0, 'image', item.data.imagePath)
            }
          }).catch(error => {
            console.log(error)
          })
        }).catch(err => {
          console.log(err)
        })
      }).catch(error => {
        console.log(error)
      })
    },
    // 刷新分组列表
    refreshGroupList() {
      this.getGroupList()
    },
    // 获取分组列表
    getGroupList() {
      var self = this
      var param = {
        pageNo: 0,
        pageSize: 200,
        groupName: ''
      }
      var data = []
      groupList(param).then(res => {
        res.data.contents.forEach(item => {
          var obj = {
            label: item.groupName,
            value: item.id
          }
          data.push(obj)
        })
        self.groupList = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 去新建分组
    goToGroupList() {
      this.$router.push({ path: '/product/group' })
    },
    // 保存
    handleConfirmDraft() {
      this.$refs.productAddForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          const data = this.productStatus
          data === '' ? this.queryParamsStatus = 'DRAFT' : this.queryParamsStatus = data
          this.sendAddProductRequest(this.queryParamsStatus)
        } else {
          return false
        }
      })
    },
    // 确认上架
    handleConfirmUpShelves() {
      this.$refs.productAddForm.validate(valid => {
        if (valid) {
          this.upLoading = true
          this.sendAddProductRequest('SALED')
        } else {
          return false
        }
      })
    },
    // 添加商品
    sendAddProductRequest(queryStatus) {
      this.queryParamsStatus = queryStatus
      var self = this
      var queryContentImage = []
      this.contentImage.forEach(item => {
        queryContentImage.push(item.url)
      })
      var queryCoverImage = []
      this.coverImage.forEach(item => {
        queryCoverImage.push(item.url)
      })

      // 属性值
      var attributesQueryParams = []
      this.productBaseInfo.forEach(father => {
        self.checkDir.forEach(idChecked => {
          father.values.forEach(child => {
            if (idChecked === child.id) {
              child.valueId = child.id
              attributesQueryParams.push(child)
            }
          })
        })
      })
      var queryParams = {
        catalogId: this.catalogId,
        config: {},
        contentImage: queryContentImage,
        coverImage: queryCoverImage,
        detail: this.productDetail,
        issuerId: this.issuerId,
        price: this.addProductParams.productPrice,
        productAttributes: attributesQueryParams,
        promotionPrice: this.addProductParams.discountPrice,
        promotionPriceEnable: this.discountTrue,
        shareDesc: this.addProductParams.productShareDesc,
        shopId: localStorage.getItem('shopId'),
        sort: '',
        summary: this.addProductParams.productSell,
        templateId: this.templateId,
        title: this.addProductParams.productName,
        underlinePrice: this.addProductParams.linePrice,
        groupIds: this.groupIdList,
        postage: this.addProductParams.sendTemplate
      }
      if (this.types === 'editor') {
        queryParams.id = self.productId
        productEditor(queryParams).then(res => {
          self.productId = res.data
          self.setStatusChange(self.queryParamsStatus)
          self.$emit('getListWay')
        }).catch(error => {
          console.log(error)
        })
      } else {
        productAdd(queryParams).then(res => {
          self.productId = res.data
          self.setStatusChange(self.queryParamsStatus)
          self.$emit('getListWay')
        }).catch(error => {
          console.log(error)
        })
      }
    },
    // 改变商品状态
    setStatusChange(status) {
      var self = this
      var obj = {
        id: this.productId,
        status: status
      }
      changeProductStatus(obj).then(res => {
        this.$message.success('操作成功')
        self.upLoading = false
        self.saveLoading = false
      }).catch(err => {
        err
        self.upLoading = false
        self.saveLoading = false
      })
    },
    // 分组选择
    handleSelect(item) {
      this.groupIdList = item
    },
    handleOverLimit(file, files) {

    },
    handleReturn() {
      this.$emit('emitReturn')
    }
  }
}
</script>

<style lang="scss">
.bg {
  padding:0 10px;
  background:rgba(236, 235, 235, 0.966);
  margin: 30px 0;
}
.child {
  .title {
    text-align: right;
    font-weight: bold;
    display: inline-block;
    width: 170px;
    span {
      position: relative;
      top: 3px;
    }
  }
  .el-row {
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
  }
}
.lineBlock {
  display: flex;
}
.company {
  margin-left:10px
}
.bottonBox {
  margin-top: 30px;
}
.addProduct-container {
  padding-bottom: 30px;
}
.addProduct-container .el-col-3 {
  padding-right: 30px!important;
}
.beRequired {
  color: red;
  margin-right: 10px;
}
.groupOprate span {
  margin-left:15px;
  color: #1890ff;
  cursor: pointer;
}
.ql-snow .ql-editor {
  height: 200px;
}
.ql-snow .ql-editor img {
  width: 150px;
}
.productAddPage {
  .el-form-item__label {
    font-size: 16px;
    padding: 0 30px 0 0;
  }
  .el-input {
    width: 95%;
  }
  .tips {
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    color:gray
  }
}

</style>
